With a slight background in computer science, I have always had an interested in technology and coding, however I didn't get to practice this much during my design education. I've wanted to work towards marrying my two passions of design and technology and creative coding was a great gateway for me to have a start. The following are some of the work I'd created through my journey of learning creative coding on the Processing 3 and P5.js programs. Not only are they great platforms to generate art but also have practical application. This entire process has been quite fun and has been an amazing learning experience.
Note: Some of the images might take a few seconds to load.

With a base of Java and JavaScript respectively, both Processing 3 and P5.js and similar to use and understand but serve completely different purposes. I started with Processing 3 where I understood all the basics of creative coding.



MAGICIANS RINGS
ARMY PARADE


DISALIGNED CIRCLE
INTERACTIVE GRID

After a few months of experimenting with Processing 3, I moved on to P5.js to bring in interaction, 3D graphics, and control mechanisms.


3D TORUS & CUBE
CONCENTRIC CIRCLES
While working on these projects the main idea was to bring human interaction to these visuals. There are endless applications for generative design. Like creating a generative identity design system or even designing a fully variable typeface.


VARIABLE TYPE
SPHERE CONTROL

I was able to put this to practical use during a design project while working with an Indian fashion house called Raw Mango. With the team at NowForm, we worked with Raw Mango to create their new Spring/Summer 2021 campaign.
The idea was based on Aposematism, which is a characteristic of certain species that use bright acidic colors to signal that they are venomous to ward away predators. We wanted to create something experimental and surreal that best represents this idea. Processing 3 was used to create a visual design option for the campaign identity for 'Aposematic' (later changed to 'Other')


Softwares used - Processing 3 & P5.js
Raw Mango
Agency - NowForm
Art direction - Sanjay Garg & Vikramaditya Sharma
Photography - Shubham Lodha
Editing - Akshay Sharma
Campaign Advisor - Squadron 14